export const SizeArr = [
  {
    name: '正方形',
    id: 'squar-small',
    icon: 'squar-small',
    style: {
      height: 1,
      width: 1
    }
  },
  {
    name: '正方形（大）',
    id: 'squar-medium',
    icon: 'squar-large',
    style: {
      height: 2,
      width: 2
    }
  },
  {
    name: '横条',
    id: 'long-small',
    icon: 'long-small',
    style: {
      height: 1,
      width: 2
    }
  },
  {
    name: '横条（大）',
    id: 'long-large',
    icon: 'long-large',
    style: {
      height: 2,
      width: 3
    }
  },
  {
    name: '竖条',
    id: 'tall-small',
    icon: 'tall-small',
    style: {
      height: 2,
      width: 1
    }
  },
  {
    name: '竖条（大）',
    id: 'tall-large',
    icon: 'tall-large',
    style: {
      height: 3,
      width: 2
    }
  }
];

export const DefaultLayoutSizeArr = [
  {
    name: '横条（大）',
    id: 'long-large',
    icon: 'long',
    style: {
      height: 2,
      width: 3
    }
  },
  {
    name: '正方形（小）',
    id: 'squar-small',
    icon: 'squar',
    style: {
      height: 1,
      width: 1
    }
  },
  {
    name: '正方形（小）',
    id: 'squar-small',
    icon: 'squar',
    style: {
      height: 1,
      width: 1
    }
  },
  {
    name: '竖条（中）',
    id: 'tall-small',
    icon: 'tall',
    style: {
      height: 2,
      width: 1
    }
  },
  {
    name: '正方形（小）',
    id: 'squar-small',
    icon: 'squar',
    style: {
      height: 1,
      width: 1
    }
  },
  {
    name: '正方形（小）',
    id: 'squar-small',
    icon: 'squar',
    style: {
      height: 1,
      width: 1
    }
  },
  {
    name: '横条（小）',
    id: 'long-small',
    icon: 'long',
    style: {
      height: 1,
      width: 2
    }
  },
  {
    name: '横条（小）',
    id: 'long-small',
    icon: 'long',
    style: {
      height: 1,
      width: 2
    }
  },
  {
    name: '正方形（小）',
    id: 'squar-small',
    icon: 'squar',
    style: {
      height: 1,
      width: 1
    }
  },
  {
    name: '正方形（小）',
    id: 'squar-small',
    icon: 'squar',
    style: {
      height: 1,
      width: 1
    }
  },
  {
    name: '横条（小）',
    id: 'long-small',
    icon: 'long',
    style: {
      height: 1,
      width: 2
    }
  },
  {
    name: '横条（小）',
    id: 'long-small',
    icon: 'long',
    style: {
      height: 1,
      width: 2
    }
  },
  {
    name: '正方形（小）',
    id: 'squar-small',
    icon: 'squar',
    style: {
      height: 1,
      width: 1
    }
  },
  {
    name: '正方形（小）',
    id: 'squar-small',
    icon: 'squar',
    style: {
      height: 1,
      width: 1
    }
  },
]

export function getSize(index, currentMode) {
  if (index === 0 && !currentMode) {
    return 'long-large';
  }
  const randomIndex = (index === undefined || index < 0 || index % 3 === 0) ? Math.round(Math.random() * 7) : (index % 8);
  // const randomIndex = Math.round(Math.random() * 8);
  const randomSizeArr = ['tall-small', 'long-small', 'tall-small', 'tall-small', 'squar-small', 'long-small', 'squar-medium', 'tall-small'];
  return randomSizeArr[randomIndex];
}

export function getRegionSize(row, col, last?) {
  let size = 'squar-small';
  window.console.log(`last? ${last}`);
  if (row >= 2 && col === 1) {
    // const randomIndex = (!index || index < 0)? Math.round(Math.random()) : (index % 3);
    if (row > 2 || last) {
      return 'tall-small';
    }
    const randomIndex = Math.round(Math.random() * 2)
    const sizeArr = ['tall-small', 'squar-small', 'tall-small'];
    size = sizeArr[randomIndex];
    return size;
  }
  if (row === 1 && col >= 2) {
    // const randomIndex = (!index || index < 0)? Math.round(Math.random()) : (index % 3);
    if (col > 2 || last) {
      return 'long-small';
    }
    const randomIndex = Math.round(Math.random() * 2)
    const sizeArr = ['long-small', 'squar-small', 'long-small'];
    size = sizeArr[randomIndex];
    return size;
  }
  if (row >= 2 && col >= 2) {
    // const randomIndex = (!index || index < 0)? Math.round(Math.random()) : (index % 3);
    const randomIndex = Math.round(Math.random() * 2)
    const sizeArr = ['long-small', 'squar-small', 'tall-small'];
    size = sizeArr[randomIndex];
    return size;
  }
  SizeArr.forEach((item) => {
    if (item.style.height === row && item.style.width === col) {
      size = item.id;
    }
  })
  return size;
}

interface CardSize {
  name: string;
  id: string;
  icon: string;
  layout: string;
  style: {
    height: number,
    width: number
  }
}

export const SizeMap: { [key: string]: CardSize } = {
  'squar-small': {
    name: '正方形（小）',
    id: 'squar-small',
    icon: 'squar',
    layout: 'sm-1*1',
    style: {
      height: 1,
      width: 1
    }
  },
  'squar-medium': {
    name: '正方形（大）',
    id: 'squar-medium',
    icon: 'squar',
    layout: 'lg-1*1',
    style: {
      height: 2,
      width: 2
    }
  },
  'squar-large': {
    name: '正方形（大）',
    id: 'squar-large',
    icon: 'squar',
    layout: 'lg-1*1',
    style: {
      height: 3,
      width: 3
    }
  },
  'long-small': {
    name: '横条（小）',
    id: 'long-small',
    icon: 'long',
    layout: 'sm-2*1',
    style: {
      height: 1,
      width: 2
    }
  },
  'long-medium': {
    name: '横条（中）',
    id: 'long-medium',
    icon: 'long',
    layout: 'lg-1*1',
    style: {
      height: 1,
      width: 3
    }
  },
  'long-large': {
    name: '横条（大）',
    id: 'long-large',
    icon: 'long',
    layout: 'lg-3*2',
    style: {
      height: 2,
      width: 3
    }
  },
  'tall-small': {
    name: '竖条（小）',
    id: 'tall-small',
    icon: 'tall',
    layout: 'sm-1*2',
    style: {
      height: 2,
      width: 1
    }
  },
  'tall-medium': {
    name: '竖条（中）',
    id: 'tall-medium',
    icon: 'tall',
    layout: 'sm-1*2',
    style: {
      height: 3,
      width: 1
    }
  },
  'tall-large': {
    name: '竖条（大）',
    id: 'tall-large',
    icon: 'tall',
    layout: 'lg-1*1',
    style: {
      height: 3,
      width: 2
    }
  }
}